<template>
    <div class="recordMain">
        <div class="recordTit">我的消费记录</div>
        <div class="recordList" v-for="(item,index) in recordList" :key="'list' +index">
            <div class="recordBox">
                <div class="recordName">{{item.bookName===null ? `${item.voucherCount}张书券`: `${item.bookName}`}}<span :class="item.category ===2?'type_xf': 'type_buy' ">{{item.category===0 ? '赠送' : item.category ===1 ? '购买' :'兑换'}}</span></div>
                <div class="recordTime">{{item.createTime}}</div>
            </div>
         
        </div>
        <div class="customerService">
            <span class="customerTit">如有疑问，请联系客服咨询</span>
            <div class="customerPhone">
                客服热线：0571-89935017<br>微信客服：klxt91118
            </div>
        </div>
    </div>
</template>

<script>
import { axGet,axPost } from '@/api/index'
export default {
    data(){
        return{
            user:this.$parent.myInfo,
            recordList:[],
            pageObj:{
                pageIndex:1,
                pageSize:20
            },
        }
    },
    created(){
        this.getPayRecord();
    },
    methods:{
        async getPayRecord(){
            let res = await axGet('GetMyPayLog',{
                userId:this.user.UserId,
                pageIndex:this.pageObj.pageIndex,
                pageSize:this.pageObj.pageSize,
            })
            console.log(res.Value.list,"消费记录res")
            if(res.ResultCode === 1){
                this.recordList =res.Value.list
            }

        }, 
    }
}
</script>

<style lang='scss' scoped>
.recordMain{
    width: 100%;
    min-height: 100%;
    position: relative;
    background: #fbfbfd;
    padding: .32rem;
    box-sizing: border-box;
    padding-bottom: 1.8rem;
}
.recordTit{
    width: 100%;
    padding-bottom: .3rem;
    font-size: .4rem;
    color: #000;
}
.recordList{
    width: 100%;
}
.recordBox{
    width: 100%;
    height: 1.6rem;
    position: relative;
    padding: .3rem .4rem;
    margin-bottom: .3rem;
    box-sizing: border-box;
    border-radius: .2rem;
    background: #FFF;
    box-shadow: 0 0 .4rem rgba($color: #3b64a8, $alpha: .15);
    .recordName{
        font-size: .32rem;
        color: #000;
        font-weight: bold;
        .type_xf{
            display: inline-block;
            margin-left: .2rem;
            width: .8rem;
            height: .4rem;
            border-radius: .2rem;
            background: #fff4d9;
            font-size: .24rem;
            color: #ffb600;
            text-align: center;
            line-height: .4rem;
            font-weight: normal;
        }
        .type_buy{
            display: inline-block;
            margin-left: .2rem;
            width: .8rem;
            height: .4rem;
            border-radius: .2rem;
            background: #d9f3ff;
            font-size: .24rem;
            color: #02affe;
            text-align: center;
            line-height: .4rem;
            font-weight: normal;
        }
        .type_exchange{
            display: inline-block;
            margin-left: .2rem;
            width: .8rem;
            height: .4rem;
            border-radius: .2rem;
            background: #fff4d9;
            font-size: .24rem;
            color: #ffb600;
            text-align: center;
            line-height: .4rem;
            font-weight: normal;
        }
    }
    .recordStat{
        position: absolute;
        top: .3rem;
        right: .4rem;
        font-size: .3rem;
        font-weight: bold;
        color: #999999;
        &.stat_suc{
            color: #02affe;
        }
    }
    .recordTime{
        margin-top: .15rem;
        font-size: .26rem;
        color: #999;
        line-height: .5rem;
    }
    .recordPrice{
        position: absolute;
        top: .95rem;
        right: .4rem;
        font-size: .26rem;
        color: #999;
    }
}
.customerService{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: .2rem;
    text-align: center;
    line-height: .4rem;
    .customerTit{
        font-size: .3rem;
        color: #333;
        font-weight: bold;
    }
    .customerPhone{
        font-size: .22rem;
        color: #999;
    }
}
</style>